<template>
  <div>
    <el-form ref="form" :model="formData" label-width="60px" class="formData">
      <el-form-item label-width="10px">
        <el-button
          size="small"
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="$refs.modal.editCategoryInfoTemplateRel(template)"
        >编辑模板</el-button>
      </el-form-item>
      <el-form-item label-width="10px">
        <el-button
          size="small"
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="$refs.modal.add(categoryInfo)"
        >编辑</el-button>
      </el-form-item>
      <el-form-item label-width="10px">
        <el-button
          size="small"
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="$refs.modal.add('系列信息')"
        >{{$t('m.button.new')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      :data="tableData"
      border="border"
      :header-cell-style="getRowClass"
      v-loading="loading"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="productModelNumber" label="型号">
        <template  slot-scope="scope">
          {{basicInfo.productModelNumber}}
        </template>
      </el-table-column>
      <el-table-column prop="productCategory" label="系列">
        <template  slot-scope="scope">
          {{basicInfo.productCategory}}
        </template>
      </el-table-column>
      <el-table-column prop="templateName" label="系列属性"></el-table-column>
      <el-table-column prop="templateValue" label="属性值"></el-table-column>
      <el-table-column prop="userName" label="最后编辑人"></el-table-column>
      <el-table-column prop="updateTime" label="最后编辑时间"></el-table-column>
    </el-table>
    <scrollTable ref="scrollTable"></scrollTable>
    <category-info-modal ref="modal"  :basicInfo="basicInfo" :templateInfoList="templateInfoList" :productTemplateRelList="tableData" @loadData="getProductTemplateRelList"  :template="template" :categoryInfo="categoryInfo"></category-info-modal>
  </div>
</template>
<script>
const ERR_OK = 200;
import scrollTable from "components/scroll/scroll-table.vue";
import account from "components/searchfor/account";
import country from "components/searchfor/country";
import categoryInfoModal from "./tabs-categoryInfoModal";
export default {
  components: {
    scrollTable,
    account,
    country,
    categoryInfoModal,
  },
  props: {
    basicInfo: Object,
  },
  data() {
    return {
      template: '模板',
      categoryInfo: '系列信息',
      formData: {
        productId: this.basicInfo.productId,
      },
      loading: false,
      tableData: [],
      templateInfoList: [],   //模板信息列表
      ASINList: [],
      SKUFNSKY: [],
      country: [],
      transportTypeList: [],
      dialogFormVisible: false,
      ruleForm: {},
      dialogTitle: "",
      dialogloading: false,
      rules: {
        countryId: [
          {
            required: true,
            message: this.$t("m.placeholder.selectCountry"),
            trigger: "change",
          },
        ],
        brandId: [
          {
            required: true,
            message: this.$t("m.placeholder.selectAccount"),
            trigger: "change",
          },
        ],
        asin: [
          {
            required: true,
            message: this.$t("m.placeholder.selectASIN"),
            trigger: "change",
          },
        ],
        sku: [
          {
            required: true,
            message: this.$t("m.placeholder.selectSKU"),
            trigger: "change",
          },
        ],
        fnsku: [
          {
            required: true,
            message: this.$t("m.placeholder.selectFNSKU"),
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    console.log("默认==")
    this.findAllTemplateInfo();
    this.getProductTemplateRelList();
  },

  methods: {
    getProductTemplateRelList(){
      this.$ajax
        .get(
          this.GLOBAL.productService +
          "/productCategoryInfoTemplate/findProductTemplateRelByProductId?productId=" + this.basicInfo.productId)
        .then((res) => {
          console.log("=============")
          console.log(res.data)
          if (res.data.code === ERR_OK) {
            this.tableData = res.data.data;
            console.log("tableData==")
            console.log(this.tableData)
          }
        });
    },

    findAllTemplateInfo(){
      this.$ajax
        .get(
          this.GLOBAL.productService +
          "/productCategoryInfoTemplate/findAllTemplateInfo")
        .then((res) => {
          console.log("======")
          console.log(res.data)
          if (res.data.code === ERR_OK) {
            this.templateInfoList = res.data.data;
          }
          this.$refs.scrollTable.scrollShow(this.$refs.table);
        });
    },
    //默认获取table
    getData() {
      this.loading = true;
      this.$ajax
        .get(
          this.GLOBAL.productService +
            "/productCoded/findProductCodeInformationByProductId?productId=" +
            this.basicInfo.productId
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.tableData = res.data.data;
          }
          this.loading = false;
          this.$refs.scrollTable.scrollShow(this.$refs.table);
        });
    },
    //条件获取table
    onSubmit() {
      this.loading = true;
      if (this.formData.brandId) {
        this.$ajax({
          method: "get",
          url:
            this.GLOBAL.productService +
            "/productCoded/findByProductIdAndSellerIdAndAsinAndSkuAndFnsku",
          params: this.formData,
        }).then((res) => {
          if (res.data.code === ERR_OK) {
            this.tableData = res.data.data;
          }
          this.loading = false;
          this.$refs.scrollTable.scrollShow(this.$refs.table);
        });
      } else {
        this.getData();
      }
    },
    getASIN() {
      this.$ajax
        .get(
          this.GLOBAL.productService +
            "/productCoded/findAsinByProductId?productId=" +
            this.basicInfo.productId
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.ASINList = res.data.data;
          }
        });
    },
    getSKUFNSKY(form) {
      if (form.asin && form.brandId) {
        this.$ajax
          .get(
            this.GLOBAL.productService +
              "/productCoded/findSkuAndFnskuByAsinAndSellerId?asin=" +
              form.asin +
              "&brandId=" +
              form.brandId
          )
          .then((res) => {
            if (res.data.code === ERR_OK) {
              this.SKUFNSKY = res.data.data;
            }
          });
      }
    },
    promptSKUFNSKY(form) {
      if (!form.asin || !form.brandId) {
        this.$message.warning("请选择账号和ASIN");
      }
    },
    getCountry() {
      this.$ajax
        .get(this.GLOBAL.productService + "/productCoded/findCountryList")
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.country = res.data.data;
          }
        });
    },
    filterCountry(value, row) {
      return row.countryName == value;
    },
    getTransportTypeList() {
      this.$ajax
        .get(this.GLOBAL.productService + "/productCoded/findTransportType")
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.transportTypeList = res.data.data;
          }
        });
    },
    filterTransportType(value, row) {
      return row.transportType == value;
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.SKUFNSKY = [];
    },
    //弹框show
    clickDialog(form) {
      if (form) {
        this.ruleForm = JSON.parse(JSON.stringify(form));
        this.dialogTitle = this.$t("m.button.edit");
      } else {
        this.ruleForm = {};
        this.dialogTitle = this.$t("m.button.new");
      }
      this.dialogFormVisible = true;
    },
    formOnSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogloading = true;
          this.ruleForm.userId = 1;
          this.ruleForm.productId = this.basicInfo.productId;
          this.ruleForm.productModelNumber = this.basicInfo.productModelNumber;
          this.ruleForm.sellerId = this.ruleForm.brandId;
          this.ruleForm.record = "当前用户";
          if (this.dialogTitle === this.$t("m.button.edit")) {
            this.editCodedInfo();
          } else {
            this.addCodedInfo();
          }
        } else {
          return false;
        }
      });
    },
    editCodedInfo() {
      this.$ajax({
        method: "post",
        url:
          this.GLOBAL.productService +
          "/productCoded/updateProductCodedInformation",
        data: this.ruleForm,
      }).then((res) => {
        if (res.data.code === ERR_OK) {
          if (res.data.data instanceof Array) {
            this.resetForm();
            this.onSubmit();
            this.$message.success(res.data.msg);
            this.dialogFormVisible = false;
          } else {
            this.$message.warning(res.data.data);
          }
        } else {
          this.$message.error(res.data.msg);
        }
        this.dialogloading = false;
      });
    },
    addCodedInfo() {
      this.$ajax({
        method: "post",
        url:
          this.GLOBAL.productService +
          "/productCoded/addProductCodedInformation",
        data: this.ruleForm,
      }).then((res) => {
        if (res.data.code === ERR_OK) {
          if (res.data.data instanceof Array) {
            this.resetForm();
            this.onSubmit();
            this.$message.success(res.data.msg);
            this.dialogFormVisible = false;
          } else {
            this.$message.warning(res.data.data);
          }
        } else {
          this.$message.error(res.data.msg);
        }
        this.dialogloading = false;
      });
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5 ";
      } else {
        return "";
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.el-form-item {
  margin-bottom: 15px;
  max-width: 260px;
}

.formData {
  .el-form-item {
    display: inline-block;
    margin-bottom: 10px;
  }
}
</style>
